<template>
  <div>
    <a-col :xl="groupGrid.xl" :lg="groupGrid.lg" :md="groupGrid.md" :sm="groupGrid.sm">
      <pie :title="head.name" @click='handlePieClick(arguments)' v-if="head.graphType === 'pie'" :dataSource="chartData" :field="head.yaxisField.split(',')[0]" :dimension="head.xaxisField"></pie>
      <bar-multid :title="head.name"  @click='handleBarClick(arguments)' v-else-if="head.graphType === 'bar'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')"></bar-multid>
      <transverse-bar-muiltid :title="head.name"  @click='handleBarClick(arguments)' v-else-if="head.graphType === 'transverseBarMuiltid'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')"></transverse-bar-muiltid>
      <line-chart-multid :title="head.name" @click='handleLineClick(arguments)' v-else-if="head.graphType === 'line'" :xaxisField="head.xaxisField" :dataSource="chartData" :fields="head.yaxisField.split(',')" ></line-chart-multid>
      <radar :title="head.name" v-else-if="head.graphType === 'radar'" :dataSource="chartData" :fields="head.yaxisField.split(',')" :xaxisField="head.xaxisField"></radar>
      <funnel :title="head.name" v-else-if="head.graphType === 'funnel'" :dataSource="chartData" :field="head.yaxisField.split(',')[0]" :dimension="head.xaxisField" ></funnel>
      <div v-else-if="head.graphType && head.graphType === 'table'" >
        <graphreport-auto-table :items="items" :cggraphreportData="cggraphreportData" :chartData="chartData"></graphreport-auto-table>
      </div>
      <div v-else-if="head.graphType">
        <a-card v-if="head.graphType !== 'table'" :title="head.name">
          <slot v-if="head.graphType !== 'table'" name="extra_" slot="extra"></slot>
          <tab-graphreport-auto-chart
            v-if="head.displayTemplate === 'tab'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
          >
          </tab-graphreport-auto-chart>
          <row-graphreport-auto-chart
            v-else-if="head.displayTemplate === 'single' || head.displayTemplate === 'double'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
            :col="getCol()"
          >
          </row-graphreport-auto-chart>
        </a-card>
        <a-card style="margin-top:10px;" title="数据明细" v-if="head.graphType && head.graphType.indexOf('table')>=0" >
          <graphreport-auto-table :items="items" :cggraphreportData="cggraphreportData" :chartData="chartData"></graphreport-auto-table>
        </a-card>
      </div>
    </a-col>
  </div>
</template>
<script>
// import { mapState } from 'vuex'
// import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { getAction } from '@/api/manage'
import Pie from '@/components/chart/Pie'
import BarMultid from '@/components/chart/BarMultid'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransverseBarMuiltid from '@/components/chart/TransverseBarMuiltid'
import Radar from '@/components/chart/Radar'
import Funnel from '@/components/chart/Funnel'
import OnlGraphreportAutoChart from '../auto/OnlGraphreportAutoChart'
import GraphreportAutoTable from './GraphreportAutoTable'
export default {
  name: 'GridGraphreportAutoChart',
  mixins: [],
  components: {
    Pie,
    BarMultid,
    LineChartMultid,
    OnlGraphreportAutoChart,
    GraphreportAutoTable,
    TransverseBarMuiltid,
    Radar,
    Funnel
  },
  computed: {
    graphTypeDictOptions() { // 获取需要渲染的图表类型
      var graphTypes = this.head.graphType || []
      var charts = []
      this.onlineGraphType.forEach(function(item, i) {
        if (graphTypes.indexOf(item.value) >= 0 && item.value !== 'table') {
          charts.push(item)
        }
      })
      return charts
    }
  },
  data() {
    return {
      url: {
        list: '/diagram/diagramConfiguration/getChartsData'
      },
      chartData: {
        sqlData: []
      },
      head: {},
      items: [],
      onlineGraphType: [
        { text: '柱状图', value: 'bar' },
        { text: '曲线图', value: 'line' },
        { text: '饼图', value: 'pie' },
        { text: '条形图', value: 'transverseBarMuiltid' },
        { text: '雷达图', value: 'radar' },
        { text: '漏斗图', value: 'funnel' },
        { text: '数据表格', value: 'table' }
      ], // 图表类型字典
      spinning: true,
      cggraphreportData: {},
      groupGrid: {}
    }
  },
  watch: {
    propsChartData: {
      handler(val, oldVal) {
        this.groupGrid = val.param.groupGrid && JSON.parse(val.param.groupGrid)
        this.init()
      },
      deep: true // true 深度监听
    }
  },
  props: ['propsChartData'],
  created() {
    // 获取图表栅格分组
    this.groupGrid = this.propsChartData.param.groupGrid && JSON.parse(this.propsChartData.param.groupGrid)
    this.init()
  },
  methods: {
    init() {
      if (this.propsChartData) {
        this.setChartData(JSON.parse(JSON.stringify(this.propsChartData)))
        this.spinning = false
        this.cggraphreportData = JSON.parse(JSON.stringify(this.propsChartData))
      } else {
        const url = this.$route.fullPath
        const code = url.replace('/online/cggraphreport/chart/', '')
        getAction(this.url.list, { code: code }).then((res) => { // 根据code获取渲染数据
          if (res.success) {
            this.setChartData(res.result)
            this.cggraphreportData = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.spinning = false
        })
      }
    },
    setChartData(data) { // 设置基础data
      this.head = data.head
      this.items = data.items
      var sqlData = []
      if (data.head.dataType === 'json' && data.head.cgrSql) {
        sqlData = JSON.parse(data.head.cgrSql.replace(/↵/g, ''))
      } else if (data.head.dataType === 'sql' && data.head.aggregate === true) {
        sqlData = data.data.aggregate
      } else if (data.head.dataType === 'sql' && data.head.aggregate === false) {
        sqlData = data.data.data
      }
      this.chartData = sqlData
      // const barMultidDataSource = this.getBarMultidDataSource()
      // this.chartData.barMultidDataSource.data = barMultidDataSource.data
      // this.chartData.barMultidDataSource.fields = barMultidDataSource.fields
      // const lineMultidDataSource = this.getLineMultidDataSource()
      // this.chartData.lineMultidDataSource.data = lineMultidDataSource.data
      // this.chartData.lineMultidDataSource.fields = lineMultidDataSource.fields
    }
  }
}
</script>
<style scoped>
.ant-table td { white-space: nowrap; }
</style>
